{% extends "emptybase.html"%}

{% block title %}EMusic-register{% endblock %}

{% block jsblock %}
<script type="text/javascript">
    <!--
    //handle the blur of checking username and email
    $usernameok = false;
    $emailok = false;

    function checkreg(){
        //check empty and the format things
        if($usernameok == false){
            alert("username invalid");
            return false;
        }
        if($emailok == false){
            alert("email invalid");
            return false;
        }
        return true;
    }

//check the valid of the name and email while inputing?
function checkUserName(){
    $.getJSON("/basicuser/checkusername?name="+$("#id_username").attr("value"),checkUserNameResult);
}

function checkUserNameResult(data){
    //$("#id_user_hidden").attr("hidden","false");
    if(data.status == "good"){
        //$("#id_user_hidden").innerHTML = "username ok";
        $("#id_user_hidden").html("username ok");
        $usernameok = true;
    }
    else if(data.status == "bad"){
        $("#id_user_hidden").html("username invalid");
        $usernameok = false;
    }
    else{
        alert("status not right:"+data.status);
        $usernameok = false;
    }
}


function checkEmail(){
    $curemail = $("#id_email").attr('value');
    if(!checkEmailFormat($curemail)){
        //alert($curemail+checkEmailFormat($curemail));
        $emailok = false;
        $("#id_email_hidden").html("email format error");
    }
    else{
        $.getJSON("/basicuser/checkemail?email="+$("#id_email").attr("value"),checkEmailResult);
    }
}

function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
alert( pattern.test(emailAddress) );
};


function checkEmailFormat(email_addr){
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(email_addr);
}

function checkEmailResult(data){
    //$("#id_email_hidden").attr("hidden","false");
    if(data.status == "good"){
        $emailok = true;
        $("#id_email_hidden").html("email ok");
    }
    else if(data.status == "bad"){
        $emailok = false;
        $("#id_email_hidden").html("email invalid");
    }
    else{
        alert("status not right:"+data.status);
    }
}
-->


function initevent(){
    //$("#id_username").onkeydown(checkUserName);
    //$("#id_email").onkeydown(checkEmail);
    //$("#id_username").keydown(checkUserName);
    //$("#id_email").keydown(checkEmail);
    $("#id_username").keyup(checkUserName);
    $("#id_email").keyup(checkEmail);
}

$(initevent);

</script>
{% endblock %}


{% block bodyblock %}

<div id="content-main">
<form action="/basicuser/reg" method="post" >{% csrf_token %}
  <div class="form-row">
      <label for="id_username">Username:</label> 
      <input type="text" name="username" id="id_username">
      <label id="id_user_hidden"></label>
  </div>

  <div class="form-row">
      <label for="id_email">Email:</label> 
      <input type="text" name="email" id="id_email">
      <label id="id_email_hidden"></label>
  </div>

  <div class="form-row">
      <label for="id_password">Password:</label> 
      <input type="password" name="password" id="id_password">
  </div>

  
  <div class="submit-row">
    <label>&nbsp;</label><input type="submit" value="Register" onclick="return checkreg()">
  </div>

</form>

</div>

{% endblock %}
